<template>
    <div class="table_box">
      <div class="table_header">
        <div class="search">
          <a-input-search
            placeholder="名称"
            style="width: 200px"
            v-model="searchData.name"
            @search="onSearch"
          />
        </div>
        <!-- <div class="btn">
          <a-button type="primary" @click="handleAdd"> 新增 </a-button>
        </div> -->
      </div>
      <div class="table_content">
        <a-table
          :columns="columns"
          :rowKey="(record) => record.id"
          :data-source="data"
          :pagination="pagination"
          :show-total="total => `Total ${total} items`"
          :loading="loading"
          @change="handleTableChange"
        >
        </a-table>
      </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import {get,gets,updata,add} from "@/services"
import { getSearchCriteria } from "@/utils/util"
var _this;
export default {
  name: "clusters",
  data() {
    return {
      columns: [
          {
            title:'ID',
            dataIndex:'id',
            key:'id'
          },
        {
          title: "簇名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "定位",
          key: "location",
          dataIndex: "location",
        },
        {
          title: "容量",
          key: "capacity",
          dataIndex: "capacity",
        },
        {
            title: "功率",
            key: "current_power",
            dataIndex: "current_power",
        },
        {
          title: "备注",
          key: "remarks",
          dataIndex: "remarks",
        }
      ],
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {},
      pagination: {
        pageSize: 10,
      },
      searchData:{
        name:''
      },
      loading: false,
      data: [],
      visible:false,
    };
  },
  props:{
      e_s_unit_id:{
          type:[String,Number],
          required: true
      }
  },
  
  computed: {
    ...mapState("setting", ["pageMinHeight"]),
  },
  created(){
    _this = this
    this.fetch({limit:10})
  },
  methods: {
      handleTableChange(pagination, filters) {
        console.log(pagination,filters);
        const pager = { ...this.pagination };
        pager.current = pagination.current;
        this.pagination = pager;
        this.fetch({
          page: pagination.current,
          limit: pagination.pageSize,
          ...filters,
        });
      },
    fetch(params = {}) {
      this.loading = true;
      gets({
        ...params,
        searchJoin:'and',
        ...(getSearchCriteria({...this.searchData,e_s_unit_id:this.$props.e_s_unit_id}))
      },'esClusters').then(({ data }) => {
        if (data.code == 20000) {
        let res = data.data;
        this.data = res.data;
        this.pagination.total = res.total
        this.pagination = {...this.pagination}
      }
        this.loading = false;
      });
    },
    onSearch() {
      this.fetch({page:1,limit:10})
    },
  },
};
</script>

<style scoped lang="less">
.new-page {
  height: 100%;
  background-color: @base-bg-color;
  border-radius: 4px;
  .form_box {
    padding: 24px;
  }
  .table_box {
    padding: 16px 23px;
    .table_header {
      display: flex;
      justify-content: space-between;
      padding-bottom: 24px;
    }
  }
  
}
</style>